<template>
  <div class="app-container">
    <el-row>
      <el-col :span="19"
        ><div class="grid-content status-list">
          <el-row type="flex" justify="space-between">
            <!-- 筛选按钮 -->
            <el-col :span="6">
              <div class="pages-content">
                <el-dropdown trigger="click" placement="bottom-start">
                  <div class="sort-button">
                    <img
                      src="@/assets/button/sort.png"
                      alt=""
                      class="sort-icon"
                    />
                    <div>排序方式</div>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>姓名</el-dropdown-item>
                    <el-dropdown-item>优先级</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" placement="bottom-start">
                  <div class="show-button">
                    <img
                      src="@/assets/button/switch.png"
                      alt=""
                      class="sort-icon"
                    />
                    <div>显示切换</div>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>正常显示</el-dropdown-item>
                    <el-dropdown-item>缩略显示</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
            <!-- 分页器 -->
            <el-col :span="6">
              <div class="pages-content">
                <el-pagination
                  layout="prev, pager, next"
                  :current-page="pageNumber"
                  :total="total"
                  :pager-count="5"
                  :page-size="pageSize"
                  background
                  @current-change="handleCurrentChange"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
          <!-- 状态页面 -->
          <el-row v-loading="loading">
            <div class="status-page" v-if="currentStatusList.length">
              <!-- 状态卡片 -->
              <div
                class="status-card"
                v-for="item in currentStatusList"
                :key="item.id"
              >
                <div class="alarm-title">
                  <div class="address">
                    {{ `${item.roomNo} / ${item.bedNo}` }}
                  </div>
                  <div class="alarm">
                    <!-- <div class="alartm-icon">
                    <img src="@/assets/person_setting.png" alt="" />
                  </div> -->
                    <el-button
                      round
                      class="detail-button"
                      size="small"
                      @click="openStatusDetail(item)"
                      >详细</el-button
                    >
                  </div>
                </div>
                <div class="username">{{ item.name }}</div>
                <div class="sleep-status">
                  <div>
                    <img
                      src="@/assets/inBedStatus/icon-off-bed-90.png"
                      class="status-icon"
                      v-if="item.Status == 1"
                    />
                    <img
                      src="@/assets/inBedStatus/icon-body-move-90.png"
                      class="status-icon"
                      v-if="item.Status == 2"
                    />
                    <img
                      src="@/assets/inBedStatus/icon-sit-bed-90.png"
                      class="status-icon"
                      v-if="item.Status == 3"
                    />
                    <img
                      src="@/assets/inBedStatus/icon-sleep-bed-90.png"
                      class="status-icon"
                      v-if="item.Status == 4"
                    />
                    <img
                      src="@/assets/inBedStatus/icon-on-bed-90.png"
                      class="status-icon"
                      v-if="item.Status == 5"
                    />
                    <img
                      src="@/assets/inBedStatus/icon-heavy-bed-90.png"
                      class="status-icon"
                      v-if="item.Status == 6"
                    />
                  </div>

                  <div class="breath-heart">
                    <div class="rate-status">
                      <div class="rate-icon">
                        <img src="@/assets/rate/icon_heart.png" alt="" />
                      </div>

                      <div class="heart-rate">{{ item.heartRate }}</div>
                    </div>
                    <div class="rate-status">
                      <img
                        src="@/assets/rate/icon_breath.png"
                        alt=""
                        class="rate-icon"
                      />
                      <div class="breath-rate">{{ item.respiratoryRate }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-empty
              description="暂无数据"
              v-else
              style="height: 760px; width: 1460px"
            ></el-empty>
          </el-row></div
      ></el-col>
      <el-col :span="5">
        <!-- 警报滚动条 -->
        <div class="grid-content alrm-scroll">
          <div class="scroll-title">
            <img src="@/assets/images/warning.png" alt="" class="title-icon" />
            <div class="titile-text">最新警告</div>
          </div>
          <el-button @click="handleAgencyAlarmStatus">一键确认</el-button>
          <div class="alarm-list">
            <div class="alarm-card" v-for="item in aralmList" :key="item.id">
              <div class="alarm-date">{{ item.measureDatetime }}</div>
              <div class="alarm-username">
                <div class="bednumber">{{ item.roomNo }}</div>
                <div class="patient-name">{{ item.name }}</div>
                <div @click="item.checked = !item.checked">
                  <img
                    class="confirm-button"
                    src="@/assets/checked.png"
                    v-if="item.checked"
                  />
                  <img
                    class="confirm-button"
                    src="@/assets/nochecked.png"
                    v-else
                  />
                </div>
              </div>
              <div class="alarm-detail">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" width="1000px">

        <el-row>
          <el-col :span="5"   style="display:flex ; justify-content: center;">
            <div>
              <img
                src="@/assets/inBedStatus/icon-off-bed-90.png"
                class="status-icon"
                v-if="statusItem.Status == 1"
              />
              <img
                src="@/assets/inBedStatus/icon-body-move-90.png"
                class="status-icon"
                v-if="statusItem.Status == 2"
              />
              <img
                src="@/assets/inBedStatus/icon-sit-bed-90.png"
                class="status-icon"
                v-if="statusItem.Status == 3"
              />
              <img
                src="@/assets/inBedStatus/icon-sleep-bed-90.png"
                class="status-icon"
                v-if="statusItem.Status == 4"
              />
              <img
                src="@/assets/inBedStatus/icon-on-bed-90.png"
                class="status-icon"
                v-if="statusItem.Status == 5"
              />
              <img
                src="@/assets/inBedStatus/icon-heavy-bed-90.png"
                class="status-icon"
                v-if="statusItem.Status == 6"
              />
            </div>
          </el-col>
          <el-col :span="18" >
            <div class="address">
              {{ `${statusItem.roomNo} / ${statusItem.bedNo}` }}
            </div>
            <div class="username">{{ statusItem.name }}</div>
          </el-col>
        </el-row>

      <div class="chart-container">
        <el-row>
          <el-col :span="4" class="big-icon"   >
            <img src="@/assets/rate/icon_heart_fast_slow180.png" alt="" />
          </el-col>
          <el-col :span="18">
            <LineChart
              :statusItem="statusItem"
              :chartname="'heartlinechart'"
            ></LineChart>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="big-icon">
            <img src="@/assets/rate/icon_breath_fast_slow180.png" alt="" />
          </el-col>
          <el-col :span="18">
            <LineChart
              :statusItem="statusItem"
              :chartname="'breathlinechart'"
            ></LineChart>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mqttService from "@/api/mqttService";
import { getMonitoringCustomersApi } from "@/api/monitor";
import {
  handleAgencyAlarmStatusApi,
  unHandleAgencyAlarmListApi,
} from "@/api/alarm";
import { mapGetters } from "vuex";
import LineChart from "./components/linechart";
export default {
  name: "Index",
  computed: {
    ...mapGetters(["agencyId", "agencystring"]),
  },
  components: {
    LineChart,
  },
  data() {
    return {
      dialogVisible: false,
      messages: [],
      pageNumber: 1,
      pageSize: 20,
      currentStatusList: [],
      total: 0,
      loading: false,
      aralmList: [],
      statusItem: {},
    };
  },
  methods: {
    /**mqtt连接 */
    subscribeToTopic() {
      //console.log('1111')
      mqttService.subscribe("topic1");
      mqttService.onMessage((topic, message) => {
        console.log(`Received message from ${topic}: ${message}`);
        this.messages.push(message);
      });
    },
    /**实时状态列表*/
    async getMonitoringCustomers() {
      this.loading = true;
      const newarray = [];
      const { data } = await getMonitoringCustomersApi({
        agencyIds: this.agencystring,
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
      });
      this.total = data.totalRecords;
      data.dataRows.forEach((item) => {
        newarray.push({
          id: item.customer.id,
          deviceNo: item.monitoringStatus.deviceNo,
          name: item.customer.name,
          roomNo: item.customer.roomNo,
          bedNo: item.customer.bedNo,
          heartRate: item.monitoringStatus.heartRate,
          respiratoryRate: item.monitoringStatus.respiratoryRate,
          Status: item.monitoringStatus.inBedStatus,
          heartBeatChart: item.monitoringStatus.heartBeatChart,
          respRateChart: item.monitoringStatus.respRateChart,
        });
      });
      this.currentStatusList = newarray;
      this.loading = false;
      console.log(this.currentStatusList);
    },
    /**翻页 */
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getMonitoringCustomers();
    },
    /**未处理警报信息 */
    async unHandleAgencyAlarmList() {
      const newlist = [];
      const {
        data: { dataRows },
      } = await unHandleAgencyAlarmListApi({
        agencyIds: this.agencystring,
        pageSize: 10,
        pageNumber: 1,
      });
      //console.log(dataRows);
      dataRows.forEach((item) => {
        newlist.push({
          id: item.id,
          name: item.customer.name,
          title: item.title,
          roomNo: item.customer.roomNo,
          measureDatetime: item.measureDatetime,
          checked: true,
        });
      });
      this.aralmList = newlist;
    },
    /**批量处理警报 */
    async handleAgencyAlarmStatus() {
      const alarmIds = [];
      this.aralmList.forEach((item) => {
        if (item.checked) {
          alarmIds.push(item.id);
        }
      });
      await handleAgencyAlarmStatusApi({
        alarmIds,
        staffId: 0,
      });
      this.unHandleAgencyAlarmList();
    },
    /**注销计时器 */
    destroyTimer() {
      this.unHandleAgencyAlarmList();
      const timer = setInterval(() => {
        this.unHandleAgencyAlarmList();
      }, 10 * 60 * 1000);
      this.$once("hook:beforeDestroy", () => {
        //通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
        clearInterval(timer);
      });
    },
    /**打开实时状态图表*/
    openStatusDetail(statusItem) {
      this.dialogVisible = true;
      this.statusItem = statusItem;
    },
  },
  created() {
    this.subscribeToTopic();
    if (this.agencystring) {
      this.getMonitoringCustomers();
      this.destroyTimer();
    }
  },
  watch: {
    agencystring(newValue, oldValue) {
      this.pageNumber = 1;
      this.getMonitoringCustomers();
      this.destroyTimer();
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  //background-color: #ebf0f0;
  .status-icon {
    width: 90px;
    height: 90px;
    border-radius: 10px;
  }
  .username {
    height: 32px;
    font-size: 24px;
    font-weight: bold;
    color: #53777e;
    line-height: 100%;
    margin-top: 5px;
  }
  .address {
    height: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #53777e;
    line-height: 30px;
  }
  .line-chart {
    width: 780px;
    height: 150px;
  }
  .chart-container{
    margin: 10px;
    .big-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background-color: #ebf1f1;
    img {
      width: 80px;
      height: 80px;
    }
  }
  }


  .el-row {
    .grid-content {
      height: calc(100vh - 120px);
    }
    .status-list {
      padding-left: 35px;
      .pages-content {
        display: flex;
        align-items: center;
        height: 40px;
        padding-bottom: 10px;
        i {
          font-size: 16px;
        }
        .sort-button,
        .show-button {
          width: 160px;
          height: 30px;
          border-radius: 20px;
          background-color: #281b66;
          padding: 0;
          color: #ffff;
          margin-right: 20px;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          cursor: pointer;
        }
      }
      .status-page {
        display: flex;
        flex-wrap: wrap;
        .status-card {
          width: 280px;
          height: 180px;
          background-color: #ffffff;
          margin: 0 10px 10px 0;
          padding: 12px;
          border-radius: 10px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          .alarm-title {
            height: 30px;
            //width: 266px;
            display: flex;
            justify-content: space-between;

            .alarm {
              display: flex;
              .alartm-icon {
                width: 30px;
                height: 30px;
                margin-right: 8px;
              }
              .detail-button {
                height: 100%;
                width: 70px;
                background-color: #ebf0f0;
                color: #53777e;
                border: none;
                font-size: 16px;
                padding: 0;
                text-align: center;
                line-height: 30px;
              }
            }
          }

          .sleep-status {
            display: flex;

            .breath-heart {
              margin-left: 30px;
              height: 90px;
              .rate-status {
                display: flex;
                align-items: center;
                height: 50%;
                .rate-icon {
                  width: 40px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                .heart-rate {
                  font-size: 40px;
                  margin-left: 30px;
                  color: #e8779e;
                }
                .breath-rate {
                  font-size: 40px;
                  margin-left: 30px;
                  color: #3fa1e8;
                }
              }
            }
          }
        }
      }
    }
    .alrm-scroll {
      width: 330px;
      background-color: #fff;
      margin: 0 auto;
      .scroll-title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #281b66;
        font-weight: bold;
        padding: 10px 0;
        img {
          margin-right: 10px;
          width: 27px;
        }
      }
      button {
        width: 270px;
        height: 30px;
        border-radius: 20px;
        background-color: #281b66;
        color: #ffff;
        margin: 0 auto 10px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
      }
      .alarm-list {
        width: 290px;
        height: 700px;
        margin: 0 auto;
        overflow: auto;
        .alarm-card {
          width: 270px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          .alarm-date {
            height: 21px;
            font-size: 14px;
            color: #53777e;
            font-weight: bold;
            line-height: 21px;
          }
          .alarm-username {
            display: flex;
            height: 26px;
            font-size: 16px;
            justify-content: space-between;
            align-items: flex-end;
            margin: 6px 0;
            color: #353535;
            .patient-name {
              font-size: 20px;
              font-weight: bold;
            }
          }
          .alarm-detail {
            height: 22px;
            font-size: 16px;
            color: #353535;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
.el-dropdown-menu {
  width: 160px;
  top: 120px !important   ;
}
</style>
<!-- 样式无法穿透，必须重新另写一个style -->
<style lang="scss">
.el-popper[x-placement^="bottom"] {
  .popper__arrow {
    border: none;
    &::after {
      content: none;
    }
  }
}
.pages-content {
  .el-pagination {
    padding-top: 5px;
    margin-left: auto;
    .btn-prev,
    .number,
    .btn-next {
      border-radius: 50% !important  ;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .active {
      background-color: #281b66 !important  ;
    }
  }
}
</style>
